<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8"> 
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: content-box;
			}
	        body{
	        	/*background-image: url(img/yuzhou3.jpg);
	        	background-size: cover;*/
	        	background-color: #000000;
	        	width: 100%;
	        	height: 100%;
	        }
			div {
				width: 222px;
				height: 222px;
				position: absolute;
				opacity: 0.7;
			}
		</style>
		<script>
			window.onload = function() {
				var mo = setInterval("move()", 100);
				var ad = setInterval("add()", 3000);
			}
			var w = document.documentElement.clientWidth - 222;
			var h = document.documentElement.clientHeight - 222;
			var lsd = 10;
			var tsd = 10;

			function move() {
				var qiu = document.getElementsByTagName("div");
				for (var i = 0; i < qiu.length; i++) {
					var lyd = parseInt(qiu[i].getAttribute("zuo"));
					var tyd = parseInt(qiu[i].getAttribute("gao"));
					var lsd = parseInt(qiu[i].getAttribute("lsd"));
					var tsd = parseInt(qiu[i].getAttribute("tsd"));
					if (lyd + 15 > w || lyd - 15 < 0) {
						lsd *= -1;
					} else if (tyd + 15 > h || tyd - 15 < 0) {
						tsd *= -1;
					}
					lyd += lsd;
					tyd += tsd;
					qiu[i].style.left = lyd + "px";
					qiu[i].style.top = tyd + "px";
					qiu[i].setAttribute("zuo", lyd);
					qiu[i].setAttribute("gao", tyd);
					qiu[i].setAttribute("lsd", lsd);
					qiu[i].setAttribute("tsd", tsd);
				}
			}

			function add() {
				//判断出球个数停止出球
				var a = document.getElementsByTagName("div");
				if (a.length > 3) {
					clearTimeout(ad);
				}
				var num = parseInt(Math.random() * 3);
				var zuo = parseInt((Math.random()==0?0.5:Math.random()) * w);
				var gao = parseInt((Math.random()==0?0.5:Math.random()) * h);
				var ball = document.createElement("div");
				ball.style.backgroundImage = "url(img/ch" + num + ".png)";
				ball.style.left = zuo + "px";
				ball.style.top = gao + "px";
				ball.setAttribute("zuo", zuo);
				ball.setAttribute("gao", gao);
				ball.setAttribute("lsd", lsd);
				ball.setAttribute("tsd", tsd);
				document.body.appendChild(ball);
			}
		</script>
	</head>

	<body>

	</body>

</html>